require(['./config'], () => {
    require(['template', 'elevateZoom', 'swiper', 'header', 'footer', 'service', 'fly'], (template, elevateZoom, Swiper,header) => {
        class shopPages {
            constructor() {
                this.getShopID().then(() => {
                    this.zoom()
                    this.addSize()
                    this.swiper()
                    this.addToCart()
                })
            }
            //^商品数据渲染页面

            getShopID() {
                const id = location.search.slice(4)
                // console.log(id)
                return new Promise(resolve => {
                    $.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${id}&normal=1&sa=`, resp => {
                        if (resp.code === 200) {
                            const {
                                detail
                            } = resp.data
                            // this.detail = detail
                            const {
                                id,
                                title,
                                thumbnail,
                                price,
                                couponStatus,
                                couponValue,
                                originPrice
                            } = resp.data.detail
                            this.detail = {
                                id,
                                title,
                                thumbnail,
                                price,
                                couponStatus,
                                couponValue,
                                originPrice
                            }
                            // console.log(this.detail)
                            const {
                                carouselList
                            } = resp.data
                            // console.log(detail)
                            $('#page-top').html(template('page-topTemplate', {
                                list: detail
                            }))
                            $('#swiper-wrapper').html(template('swiper-wrapperTemplate', {
                                list: carouselList
                            }))
                            $('#page-bottom').html(template('page-bottomTemplate', {
                                list: detail
                            }))
                            resolve()
                        }
                    })
                })
            }

            //^放大镜
            zoom() {
                $('.zoom-image').elevateZoom({
                    gallery: 'gal1', // 放所有小图容器盒子ul的id，不加#
                    scrollZoom: 'ture',
                })
            }
            //^添加尺码,加边框,购买数量
            addSize() {
                $('.attr-list').on('click', 'li', function () {
                    $(this).parent().prev().children().empty()
                        .append($(this).children().html())

                    $(this).siblings().css({
                        "border": "none"
                    })
                    $(this).css({
                        "border": "1px solid red"
                    })
                })

                $('.smallpic').on('click', function () {
                    $(this).parent().parent().siblings().find('img').css('border', 'none')
                    $(this).css({
                        "border": "2px solid black"
                    })
                })
                //^输入框数量
                $('.take').on('click', function () {
                    let num = $(this).next().val()
                    if (num <= 1) {
                        num = 1
                        // console.log(num)
                    } else {
                        num--
                    }
                    $(this).next().val(num)
                })

                $('.add').on('click', function () {
                    let num2 = $(this).prev().val()
                    num2++
                    $(this).prev().val(num2)
                })
            }
            swiper() {
                var mySwiper = new Swiper('.swiper-container', {
                    direction: 'vertical', // 垂直切换选项
                    autoplay: {
                        delay: 2000
                    },
                    loop: true, // 循环模式选项
                })
            }
            //^加入购物车
            addToCart(num) {
                // console.log(this.num)
                $('.btn-addCar').on('click', (e) => {
                    this.fly(e)
                    this.num = parseInt($('.spNum').val())
                    // console.log(this.num)
                    let cart = localStorage.getItem('cart')
                    if (cart) {
                        //^取数据
                        cart = JSON.parse(cart)
                        // console.log(cart)
                        const isExist = cart.some(shop => shop.id === this.detail.id)
                        if (isExist) {
                            //^商品加过购物车 ， 数量加1
                            cart = cart.map(shop => {
                                if (shop.id === this.detail.id) {
                                    // console.log(shop.count)
                                    // console.log(this.num)
                                    shop.count = parseInt(shop.count)
                                    shop.count += this.num
                                }
                                // console.log(shop.count)
                                return shop                             
                            })
                        } else {
                            cart.push({
                                ...this.detail,
                                count: this.num,
                                check: true   
                            })
                        }
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        //^购物车空
                        //^添加后数量加1
                        localStorage.setItem('cart', JSON.stringify([{
                            ...this.detail,
                            count: this.num,
                            check: true
                        }]))
                    }
                })
            }
            //*飞入购物车效果
            fly(e){
                $(`<img class="fly" src="/images/timg.jpeg"></img>`).fly({
                    start: {
                        left: e.clientX, //开始位置（必填）#fly元素会被设置成position: fixed
                        top: e.clientY, //开始位置（必填）
                    },
                    end: {
                        left: $('.frCar').offset().left - $(window).scrollLeft(), //结束位置（必填）
                        top: $('.frCar').offset().top - $(window).scrollTop(), //结束位置（必填）
                        // width: 100, //结束时高度
                        // height: 100, //结束时高度
                    },
                    // autoPlay: false, //是否直接运动,默认true
                    speed: 1, //越大越快，默认1.2
                    vertex_Rtop: 47, //运动轨迹最高点top值，默认20
                    onEnd: function () {
                        this.destroy()
                        header.caLaCartCount()
                    } //结束回调
                });
            }         
        }
        new shopPages()
    })
})